<template>
  <div id="app">
    <myAlert type="error" :center="true">
      <span slot="title">父组件传递的值</span>
    </myAlert>

    <my-link
      :underline="false"
      type="danger"
      href="http://www.baidu.com"
    ></my-link>

    <p>{{ msg }}</p>
    <my-input
      type="password"
      v-model="msg"
      placeholder="输入的占位符"
      @blur="onblur"
      @focus="onfocus"
    ></my-input>

    <!-- 按钮 -->
    <div class="btn" style="margin-top:20px">
      <my-button type="warning" :disable="false" @click="doSome">
        <template>
          传值按钮
        </template>
      </my-button>
      <my-button @click="showMessage">消息测试</my-button>
    </div>

    <!-- switch -->
    <my-switch v-model="value"></my-switch>
    <!-- 表单 -->
    <my-form>
      <template>
        <my-button @click="changeShowDialog">切换showDialog</my-button>
      </template>
    </my-form>

    <!-- FormItem -->
    <my-form-item label="文本"></my-form-item>
    <!-- MyDialog -->
    <!-- 为了让组件内部可以修改showDialog，用sync修饰符 -->
    <my-dialog :showDialog.sync="showDialog">
      <span slot="title">传入标题</span>
      测试默认插槽内容
      <div slot="footer">
        <my-button @click="cancelClick">取消</my-button>
        <my-button type="primary" @click="primaryClick">确认</my-button>
      </div>
    </my-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      showDialog: false,
      check: false,
      value: ''
    }
  },
  methods: {
    // 输入事件
    // inputChange (e) {
    //   this.msg = e
    //   console.log(e, this.msg)
    // },
    onblur () {
      // console.log('失去焦点')
      console.log(this.msg)
    },
    onfocus () {
      // console.log('获得焦点了')
    },
    doSome (e) {
      console.log(e)
    },
    changeShowDialog () {
      this.showDialog = true
    },
    cancelClick () {
      console.log('取消被点击了')
      this.showDialog = false
    },
    primaryClick () {
      console.log('确认被点击了')
      this.showDialog = false
    },
    showMessage () {
      this.$message({
        message: '新增成功',
        type: 'success',
        duration: 1000
      })
    }
  }
}
</script>

<style></style>
